<template>
    <div class="body-background-style" v-bind:style="{height:clientHeight}">
                   <div class="row top-row">
                  <div  class="item-list">
                      <div class="margin-top">
                      </div>
                     <div class="item">
                           <div class="item-list-lable">
                               活动类型:
                           </div>
                           <div class="item-list-menage">
                               {{menage.type}}
                           </div>
                     </div>
                      <div class="item">
                          <div class="item-list-lable">
                              活动名称:
                          </div>
                          <div class="item-list-menage">
                              {{menage.name}}
                          </div>
                      </div>
                      <div class="item">
                          <div class="item-list-lable">
                              活动地址:
                          </div>
                          <div class="item-list-menage">
                              {{menage.city}}

                          </div>
                      </div>
                      <div class="item">
                          <div class="item-list-lable">
                              活动日期:
                          </div>
                          <div class="item-list-menage">
                              2017-12-12
                          </div>
                      </div>
                  </div>

                   <div  class="item-list">
                           <div class="margin-top">
                           </div>
                           <div class="item">
                               <div class="item-list-lable">
                                   总负责人:
                               </div>
                               <div class="item-list-menage">
                                   {{menage.username}}
                               </div>
                           </div>
                           <div class="item">
                               <div class="item-list-lable">
                                   总参与数:
                               </div>
                               <div class="item-list-menage">
                                   {{menage.nums}}人
                               </div>
                           </div>
                           <div class="item">
                               <div class="item-list-lable">
                                   支部成员:
                               </div>
                               <div class="item-list-menage" >
                                   <span style="margin-left: 4px" v-for="name in menage.userlist">{{name}}</span>
                               </div>
                           </div>
                       </div>

                   <div  class="item-list ">
                           <div class="margin-top  margin-top-image">
                               活动图片
                           </div>
                           <div class="item image-item">
                               <div class="item-image" v-for="pic in menage.images">
                                   <img style="width: 80px;height: 80px" v-bind:src="pic"/>
                               </div>
                          </div>
                       </div>

                       <div  class="item-list ">
                           <div class="margin-top  margin-top-image">
                               活动详情
                           </div>
                           <div class="item item-text">
                               {{menage.menage}}
                           </div>
                           <div class="margin-bottom-menage">
                               <div class="login-botton-style "  @click="openUpdate('1')">
                                   <a href="#"  class="a-style">编辑</a>
                               </div>
                               <div style="margin-left: 25px" @click="openUpdate(usertype=='2'?2:3)" class="login-botton-style login-botton-style-click">
                                   <a>{{usertype=='2'?'审批':"取消"}}</a>
                               </div>
                           </div>

                       </div>
        </div>
    </div>
</template>
<script>
    import Vue from 'vue';
    import appheader from '../components/appheader';
    import { Toast } from 'mint-ui';
    export default {
        data () {
            return {
                clientHeight:"600px",
                bodyheight:"",
                usertype:"1",
                menage:{
                    type:"外出",
                    name:"追寻红色记忆",
                    city:"上海淞沪抗战纪念馆",
                    datatime:"2017-08-03",
                    username:"张毅",
                    nums:12,
                    userlist:[
                        "王毅","张婕","杨云海"
                    ],
                    images:[
                        "http://img4.imgtn.bdimg.com/it/u=3822933508,873438676&fm=26&gp=0.jpg",
                        "http://img2.imgtn.bdimg.com/it/u=1036989181,504777199&fm=200&gp=0.jpg",
                        "http://img4.imgtn.bdimg.com/it/u=3822933508,873438676&fm=26&gp=0.jpg"
                    ],
                    menage:"白洋淀雁翎队纪念馆 广东东江纵队纪念馆 旅顺日俄监狱旧址 侵华日军南京大屠杀遇难同胞纪念馆                                    上海淞沪抗战纪念馆 伪满皇宫博物院 西安事变纪念馆 周恩来邓颖超纪念馆 重"
                },
                user:{

                },
            }
        },
        created:function(){
            this.$emit('getViewData',"投注站");
            this.usertype=this.$route.params['id'];
            console.log(this.usertype);
        },

        methods: {
            async getContent () {
                const response = await fetch('/act/addActivity');
                this.content = await response.text();
                console.log(this.content);
            },
            //初始化高度
            getViewData:function () {
                let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
                this.bodyheight=h;

            },
            //点击审批按钮
            openUpdate:function(type){
                //编辑
             if(type=='1'){
               this.$router.push({name:'add',params:{
                  id:this.$route.params['id']
              }})
             }else if(type=='3'){
                 this.$router.push({name:'jifen',params:{
                     id:this.$route.params['id']
                 }})
             }else{
                 //审批
               let alert=Toast({ 
                message: '操作成功',
                iconClass: 'icon icon-success'
               });
               setTimeout(()=>{
                alert.close();
                //推送微信消息
                   this.getContent();
                   this.$router.push({name:'jifen',params:{
                       id:this.$route.params['id']
                   }})
               },1000)
              }
            }
        },
        mounted() {
            this.clientHeight = `${document.documentElement.clientHeight}px`;
            // 然后监听window的resize事件．在浏览器窗口变化时再设置下背景图高度．
            const that = this;
            window.onresize = function temp() {
                that.clientHeight = `${document.documentElement.clientHeight}px`;
            };
        },
        components: {
            'appheader':appheader,
            'Toast':Toast
        }
    }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
    div{
        color: #000;
    }
    .col-md-12{
        width: 100%;
    }
    .top-row{
        /*margin-top: 50px;*/
    }

    .item-list{
        width: 100%;
        .margin-top{
            background-color: #ebebeb;
            height: 22px;
        }
        .item{
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 14px;
            /*margin-left: 14px;*/
            display: flex;
            flex-direction: row;
            border-bottom: 1px solid #ebebeb;
            opacity: 0.7;
            .item-list-lable{
                width:26%;
            }
            .item-list-menage{
                /*padding-left: 14px;*/
                width: 74%;
                text-align: left;
            }
            .item-image{
                width: 32%;
                margin-top: 20px;
                margin-bottom: 2px;
                text-align: center;
            }
        }
        .margin-top-image{
            padding-left: 20px;
            padding-top: 3px;
            padding-bottom: 4px;
        }
        .image-item{
            border-bottom: none !important;
        }
        .item-text{
            /*margin-left: 4px;*/
            padding-right: 15px;
        }
        .margin-bottom-menage{
            padding-top: 23px;
            background-color: #ebebeb;
            height: 64px;
            line-height: 64px;
            align-items: center;
            justify-content:center;
            display: flex;
            text-align: center;
            font-size: 12px;
        }
    }
    .login-botton-style{
        -webkit-justify-content: center;
        -webkit-align-items:center;
        line-height: 38px;
        height: 38px;
        border-radius: 20px;
        width: 126px;
        color: #e9b150;
        border: 2px #e9b150 solid;

    }
    .login-botton-style-click{
        color: #ffffff;
        background-color: #e9b150 ;
    }
    .a-style{
        color: #e9b150;
    }
    .body-background-style{
        width:100%;
        /*height: 100%;*/
        /*overflow-y: hidden;*/
        overflow-x: hidden;
        /*overflow-wrap: break-word;*/
        background:url("");


    }

</style>